<template>
  <div class="bg-gray-50 flex-1">
    <!-- 顶部导航 -->
    <div class="mb-4 mt-4">
      <div class="mx-auto px-6">
        <a-menu mode="horizontal" :selected-keys="[currentRoute]" class="settings-menu">
          <a-menu-item key="system-users" class="menu-item">
            <template #icon><BaseIcon name="icon-user-group" /></template>
            <router-link to="/settings/system-users">系统用户</router-link>
          </a-menu-item>
          <a-menu-item key="systemRole" class="menu-item">
            <template #icon><BaseIcon name="icon-user" /></template>
            <router-link to="/settings/systemRole">系统角色</router-link>
          </a-menu-item>
          <a-menu-item key="permissionFeature" class="menu-item">
            <template #icon><BaseIcon name="icon-lock" /></template>
            <router-link to="/settings/permissionFeature">功能权限</router-link>
          </a-menu-item>
        </a-menu>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="mx-auto px-6">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import BaseIcon from '@/components/BaseIcon.vue'
const route = useRoute()
const currentRoute = computed(() => route.name as string)
</script>

<style scoped>
.settings-menu {
  background-color: rgb(249 250 251);
}

:deep(.arco-menu-horizontal) {
  border-bottom: none;
  height: 36px;
  line-height: 36px;
}

:deep(.arco-menu-item) {
  margin: 0 2px !important;
  font-weight: 600;
  background-color: rgb(249 250 251) !important;
  padding: 0 12px !important;
  font-size: 13px;
  border-radius: 6px !important;
}

:deep(.arco-menu-horizontal .arco-menu-item) {
  height: 36px;
  line-height: 36px;
}

:deep(.arco-menu-item .arco-icon) {
  margin-right: 4px;
  font-size: 14px;
  position: relative;
  top: -1px;
}

:deep(.arco-menu-selected) {
  background-color: white !important;
  border-radius: 6px !important;
}

:deep(.arco-menu-light .arco-menu-selected) {
  border-bottom-color: transparent;
}

:deep(.arco-menu-light .arco-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px !important;
}

:deep(.arco-menu-light .arco-menu-item) {
  background-color: rgb(249 250 251) !important;
  min-width: auto !important;
  border-radius: 6px !important;
}

:deep(.arco-menu-light .arco-menu-item.arco-menu-selected) {
  background-color: white !important;
  border-radius: 6px !important;
}

:deep(.arco-menu-item a) {
  display: inline-block;
  white-space: nowrap;
}
</style>
